<template>
  <div class="login">
    <h3 class="logo">洛书数字化平台</h3>
    <div v-if="state === 'login'" class="login-box box">
      <div class="title">账号登录</div>
      <p class="sub">
        还没有账号？
        <span class="change" @click="onChange('register')">去注册</span>
      </p>
      <a-form
        name="login"
        :model="loginForm"
        :rules="loginFormRules"
        @finish="onLogin"
      >
        <a-form-item has-feedback name="username">
          <a-input v-model:value="loginForm.username" placeholder="账号" />
        </a-form-item>
        <a-form-item has-feedback name="password">
          <a-input-password
            v-model:value="loginForm.password"
            placeholder="密码"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div v-else class="register-box box">
      <div class="title">注册洛书账号</div>
      <p class="sub">
        已有账号？
        <span class="change" @click.prevent="onChange('login')">直接登录</span>
      </p>
      <a-form
        name="register"
        :model="registerForm"
        :rules="registerFormRules"
        @finish="onRegister"
      >
        <a-form-item has-feedback name="username">
          <a-input
            v-model:value="registerForm.username"
            placeholder="账号：请输入3至10位字符"
          />
        </a-form-item>
        <a-form-item has-feedback name="password">
          <a-input-password
            v-model:value="registerForm.password"
            placeholder="密码：请输入6至20位字符"
          />
        </a-form-item>
        <a-form-item has-feedback name="companyName">
          <a-input
            v-model:value="registerForm.companyName"
            placeholder="请输入企业名称"
          />
        </a-form-item>
        <a-form-item has-feedback name="scale">
          <a-select
            v-model:value="registerForm.scale"
            :options="ScaleOptions"
            placeholder="请选择人员规模"
          />
        </a-form-item>
        <a-form-item has-feedback name="location">
          <a-cascader
            v-model:value="registerForm.location"
            :options="ProviceCityOptions"
            placeholder="请选择所属地区"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">注册</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="in-tray">
      <a href="https://beian.miit.gov.cn/" target="_blank">
        鄂ICP备2023003419号-1
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import { ResponseHandle } from '@/global/util/preUtils';
import { ScaleOptions, ProviceCityOptions } from '@/global/constant/options';

export default defineComponent({
  name: 'Login',
  components: {},
  setup() {
    const store = useStore();
    const state = ref('login');
    const loginFormRules: any = {
      username: [{ required: true, trigger: 'blur' }],
      password: [{ required: true, trigger: 'blur' }],
    };
    const validatePassword = async (_rule: Rule, value: string) => {
      if (value === '') {
        return Promise.reject(new Error('请输入'));
      } else if (value.length < 6 || value.length > 16) {
        return Promise.reject(new Error('需限定在6至16位字符'));
      } else if (
        !/[a-zA-Z]+/g.test(value) ||
        !/\d+/g.test(value) ||
        /[^a-zA-Z\d]+/g.test(value)
      ) {
        return Promise.reject(new Error('密码由字母和数字组成'));
      } else {
        return Promise.resolve();
      }
    };
    const registerFormRules: Record<string, Rule[]> = {
      username: [{ required: true, max: 10, min: 3, trigger: 'change' }],
      password: [
        { required: true, validator: validatePassword, trigger: 'change' },
      ],
      companyName: [{ required: true, max: 30, min: 2, trigger: 'change' }],
      scale: [{ required: true, trigger: 'change', message: '请选择' }],
      location: [{ required: true, trigger: 'change', message: '请选择' }],
    };
    const loginForm = reactive({
      username: '',
      password: '',
    });
    const registerForm = reactive({
      username: '',
      password: '',
      companyName: '',
      scale: undefined,
      location: undefined,
    });
    const onChange = (type: string) => {
      state.value = type;
    };
    const onLogin = (values: any) => {
      store.dispatch('root/login', loginForm);
    };
    const onRegister = async () => {
      const res = await store.dispatch('root/register', registerForm);
      ResponseHandle(res, () => {
        state.value = 'login';
        message.success('注册成功');
      });
    };

    return {
      state,
      loginFormRules,
      registerFormRules,
      loginForm,
      registerForm,
      ScaleOptions,
      ProviceCityOptions,
      onChange,
      onLogin,
      onRegister,
    };
  },
});
</script>
<style lang="less" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to right top,
    @rb-background-color,
    @rb-background-color-light
  );
  .logo {
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-family: cursive;
    font-weight: 600;
  }
  .box {
    width: 520px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    border-radius: 14px;
    background: @rb-body-background;
    &.register-box {
      height: 640px;
    }
    .title {
      margin-top: 24px;
      font-size: 36px;
      line-height: 54px;
    }
    .sub {
      margin-bottom: 24px;
      font-size: 12px;
      .change {
        font-size: 14px;
        color: @rb-primary-color;
        cursor: pointer;
      }
    }
    :deep .ant-form {
      .ant-form-item-control-input-content {
        height: 48px;
        line-height: 48px;
        border-radius: 4px;
      }
      .ant-input,
      .ant-input-affix-wrapper,
      .ant-select,
      .ant-select-selector,
      .ant-select-selection-placeholder,
      .ant-select-selection-item {
        height: 100%;
        line-height: 48px;
        border-radius: 4px;
      }
      .ant-btn {
        width: 100%;
        height: 48px;
        border-radius: 8px;
      }
    }
  }
  .in-tray {
    width: 100%;
    position: absolute;
    bottom: 0;
    line-height: 64px;
    text-align: center;
  }
}
</style>
